<template>
<div>
  <div class="recommend-tit">热销推荐</div>
  <ul>
    <li class="item" v-for="item of list" :key="item.id">
      <div class="item-img-wrapper">
        <img class="item-img" :src="item.imgUrl" alt="">
      </div>
      <div class="item-info">
        <p class="item-title">{{item.tit}}</p>
        <p class="item-desc">{{item.desc}}</p>
      </div>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array,
  },
  data() {
    return {

    };
  },
};
</script>

<style lang="stylus" scoped>
@import '~style/mixins.styl'
.recommend-tit
  padding: 2vw
  font-size: 4vw
  background : #eee
.item
  overflow: hidden
  padding-top: 2vw
  display : block
  height: auto
  background : #eee
  .item-img-wrapper
    width: 100%
    img
      width: 100%
  .item-info
    position: relative
    padding: 2vw
    width : 100%
    .item-title
      font-size: 4vw
      ellipsis()
      font-weight : bold
    .item-desc
      margin-top: 2vw
      font-size : 3vw
      overflow:hidden
      height: 7vw
      line-height: 4vw
      ellipsis-2()
      color: #666
</style>
